<template>
<div id="aaa"  >
  <header >
    <li v-for="menu in menus"  @mouseover="menu.show=true" @mouseout="menu.show=false">
      <a :href="menu.url">{{menu.name}}</a>
      <ul v-show="menu.show">
          <li v-for="item in menu.submenus" @mouseover="item.show=true" @mouseout="item.show=false" >
<!--            <a :href="item.url">{{item.name}}</a>-->
            <router-link v-bind:to=item.url>{{item.name}}</router-link>
          </li>
      </ul>
    </li>
    <h1 ><li style="color: lightgray ">欢迎来到3013餐馆</li></h1>
  </header>

<router-view></router-view>
<bottom></bottom>

</div>
</template>

<script>
import Bottom from "./bottom";
export default {
  name: "index",
  components: {Bottom},
  data(){
    return{
      page_visible:false,
      menus: [
        {
          name: '首页',
          show: false,
          submenus: [
            {
              name: '餐馆首页',
              url: '/shouye1',
              show: false,
            } ,
            {
              name: '美食故事',
              url: 'shouye2',
              show: false,
            }
          ]
        },
        {
          name: '餐饮文化',
          show: false,
          submenus: [
            {
              name: '中餐',
              url: '/ChineseMeal',
              show: false,
            } ,
            {
              name: '西餐',
              url: '/WesternFood',
              show: false,
            }
          ]
        },
        {
          name: '菜品介绍',
          show: false,
          submenus: [
            {
              name: '川菜',
              url: '/Sichuan_Cuisine',
              show: false,
            } ,
            {
              name: '湘菜',
              url: '/Xiang_Cuisine',
              show: false,
            }
          ]
        },
        {
          name: '留言板',
          show: false,
          submenus: [
            {
              name: '一号留言板',
              url: '/MessageBoard',
              show: false,
            } ,
            {
              name: '二号留言板',
              url: '/MessageBoard2',
              show: false,
            }
          ]
        },

      ]
    }
  },
}
</script>

<style scoped>

#aaa{
  /*background-image: url("../assets/beijin.jpg");*/
  /*background-color: #f8dbe7;*/
  /*border:1px solid black;*/
  width: auto;
  height: auto;
  margin-top: 20px;
  font-weight:bold;
  font-family:SimHei;
  /*background-repeat: repeat;*/
}

header{
  /*position:fixed;*/
  height: 40px;
  margin-top: -20px;
  /*border:1px solid red;*/
  background-color: whitesmoke;

}
[v-cloak]{
  display:none;
}

#app li a:hover{
  background-color: pink;
}
#in{
  list-style-type: none;
  float: left;
  text-align: center;
  position: relative;
  /*border: black solid 1px;*/
  left: 122px;
  top:-40px;
  background-color: #daf3eb;
}
li{
  text-align: center;
  list-style-type: none;
  float: left;
  text-align: center;
  position: relative;
  margin-left: 80px;
  background-color: whitesmoke;

}
ul{
  position: absolute;
  left: -120px;
  top:40px;
  width: 30px;
  margin-top:1px;
  font-size: 12px;

}

a {
  text-decoration: none;
  display: block;
  width: 120px;
  height: 40px;
  line-height: 40px;

}

</style>
